<template>
    <div class="">
        <el-card class="box-card">
            <el-button type="primary" class="mb10" size="small" @click="addCat">添加分类</el-button>
            <!-- <el-button type="primary" size="large" class="refresh" @click="refreshData">刷新</el-button> -->
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" width="180" align="center"> </el-table-column>
                <el-table-column prop="resourceImg" label="分类图标" width="180" align="center">
                    <template slot-scope="scope">
                        <img class="w100" :src="scope.row.resourceImg" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="分类名称" align="center"> </el-table-column>
                <el-table-column prop="parentName" label="上级分类" width="180" align="center"></el-table-column>
                <el-table-column prop="levelOrder" label="排序" width="180" align="center"> </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="editPro(scope.row)">修改</el-button>
                        <el-button type="primary" size="mini" @click="delePro(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="query.pagenum"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
            ></el-pagination>
        </el-card>

        <!-- 修改分类属性面板 -->
        <el-dialog title="修改商品分类" :visible.sync="editVisible" width="50%">
            <!-- 第一行 -->
            <el-row>
                <el-col :span="12"> 分类名称: <el-input v-model="form.name"> </el-input> </el-col>
                <el-col :span="12">
                    上级分类:
                    <el-select v-model="form.parentID" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row>
                <el-col :span="12">
                    <div class="crop-demo">
                        <span class="title">分类图标:</span>
                        <img :src="form.resourceImg" class="pre-img" />
                        <el-button type="primary" class="mb10" @click="$refs.uploads.click()">上传</el-button>
                        <input type="file" name="upload" id="upload" ref="uploads" style="display: none" @change="uploadImg" />
                    </div>
                </el-col>
                <el-col :span="12"> 排序:<el-input v-model="form.levelOrder"></el-input> </el-col>
            </el-row>
            <el-row>
                <el-select v-model="form.selectIds" multiple placeholder="请选择">
                    <el-option v-for="item in allBrandsList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加商品分类面板 -->
        <el-dialog title="添加商品分类" :visible.sync="addVisible" width="50%" @close="addDialogClosed">
            <el-button type="primary" size="small" class="saveData" @click="saveData">保存</el-button>
            <!-- 第一行数据 -->
            <el-row>
                <el-col :span="6" class="name mt">分类名称:</el-col>
                <el-col :span="6">
                    <el-input v-model="form.name"></el-input>
                </el-col>
                <el-col :span="6" class="last mt">上级分类:</el-col>
                <el-col :span="6">
                    <el-select v-model="form.parentID" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-col>
            </el-row>

            <!-- 第二行数据 -->
            <el-row>
                <el-col :span="4" class="name mt">
                    <span>分类图标:</span>
                </el-col>
                <el-col :span="10" class="w32">
                    <img class="wh100" :src="form.resourceImg" alt="" />
                    <input type="file" name="upload" id="upload" ref="uploads" style="display: none" @change="uploadImg" />
                    <el-button type="primary" class="mt20" @click="addCatImg">上传</el-button>
                </el-col>
                <el-col :span="4" class="last mt">排序:</el-col>
                <el-col :span="6">
                    <el-input v-model.number="form.levelOrder"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-select v-model="form.selectIds" multiple placeholder="请选择">
                    <el-option v-for="item in allBrandsList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import { getCatoryList, getCatoryTree, addCatory, getAllBrand, editCatory, uploadPic, getCatoryInfo } from '@/api/goods.js'
export default {
  name: 'brand',
  data () {
    return {
      query: {
        pagenum: 1,
        pagesize: 5
      },
      parentID: null,
      levelOrder: 0,
      pageTotal: 0,
      editVisible: false,
      // 修改分类面板里面的分类名称
      name: '', // todo
      selectedValue: '',
      cropImg: '',
      addVisible: false,
      cateName: '',
      selectCat: '',
      order: 1,
      tableData: [],
      options: [],
      roleId: '',
      form: {
        name: '',
        resourceImg: '',
        parentID: '',
        levelOrder: 0,
        brands: [],
        selectIds: [],
        id: ''
      },
      isAdd: true,
      allBrandsList: []
    }
  },
  created () {
    // 获取所有分类信息
    this.getCatoryList()

    // 获取所有分类目录树
    this.getCatoryTree()
  },
  mounted () {

  },
  methods: {
    // 获取所有分类列表
    async getCatoryList () {
      const { Data } = await getCatoryList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        name: null,
        treeNo: null
      })
      this.pageTotal = Data.paging.totalItemCount
      this.tableData = Data.list
      console.log(Data)
    },

    async getCatoryTree () {
      const { Data } = await getCatoryTree()
      console.log(Data)
      this.options = Data.dictCategory
    },

    // 获取所有品牌信息
    async getAllBrands () {
      const { Data } = await getAllBrand()
      console.log(Data)
      this.allBrandsList = Data.list
    },

    // 点击修改按钮, 修改分类名称
    async editPro (role) {
      this.getAllBrands()
      this.isAdd = false
      this.editVisible = true
      const { Data } = await getCatoryInfo({
        id: role.id
      })
      this.form = {
        ...Data,
        brands: Data.cbList.map((t) => {
          return { brandid: t.id }
        }),
        selectIds: Data.cbList.map(t => t.id)
      }
      console.log(this.form)
    },

    // 确定修改分类
    async confirmEdit () {
      this.form.brands = this.form.selectIds.map(t => {
        return { brandid: t }
      })
      const data = await editCatory({
        ...this.form
      })
      if (data.RequestStatus !== 200) return this.$message.error('修改分类失败')
      this.$message.success('修改分类成功')
      this.editVisible = false
      this.getCatoryList()
      console.log(this.form)
      console.log(data)
    },

    // 把图片上传到服务器, 获取从服务器返回的图片地址
    async uploadImg (e) {
      const file = e.target.files[0]
      if (!file.size) return
      const formData = new FormData()
      formData.append('file', file)
      formData.append('fileCategory', 10)
      const { Data } = await uploadPic(formData)
      console.log(Data)
      if (this.isAdd) {
        this.form.resourceImg = 'http://118.31.13.253:810/Upload/' + Data.url
      } else {
        this.form.resourceImg = 'http://118.31.13.253:810/Upload/' + Data.url
      }
    },

    // 上传缩略图
    async uploadPic (e) {
      const file = e.target.files[0]
      if (!file.size) return
      const formData = new FormData()
      formData.append('file', file)
      formData.append('fileCategory', 10)
      const { Data } = await uploadPic(formData)
      console.log(Data)
      if (this.isAdd) {
        this.form.resourceImg = 'http://118.31.13.253:810/Upload/' + Data.url
      } else {
        this.form.introduction = 'http://118.31.13.253:810/Upload/' + Data.url
      }
      console.log(this.form.introduction)
    },

    // 点击删除按钮, 删除分类
    delePro () {

    },

    // 添加分类
    addCat () {
      this.addVisible = true
      this.getAllBrands()
    },

    // 保存按钮, 确认添加信息
    async saveData () {
      this.form.brands = this.form.selectIds.map(t => ({ brandid: t }))
      console.log(this.form.selectIds)
      const data = await addCatory({
        ...this.form
      })
      console.log(data)
      if (data.RequestStatus !== 200) return this.$message.error('添加分类失败')
      this.$message.success('添加分类成功')
      this.addVisible = false
      this.getCatoryList()
    },

    // 监听分页每页条数发生改变
    handleSizeChange (newpagesize) {
      this.query.pagesize = newpagesize
      this.getCatoryList()
    },

    // 监听分页页数发生改变
    handlePageChange (newpagenum) {
      this.query.pagenum = newpagenum
      this.getCatoryList()
    },

    // 添加分类的图片
    addCatImg () {
      this.isAdd = true
      this.$refs.uploads.click()
    },

    // 添加商品分类面板关闭
    addDialogClosed () {
      this.form = {
        name: '',
        resourceImg: '',
        parentID: '',
        levelOrder: 0,
        brands: [],
        selectIds: []
      }
    }
  }
}
</script>

<style scoped>
.el-input {
    width: 203px;
}

.el-row {
    margin-bottom: 20px;
}

.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}

.crop-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crop-demo-btn {
    position: relative;
    width: 80px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}

.crop-input {
    position: absolute;
    width: 80px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.title {
    margin-top: 10px;
}

.el-col {
    padding-right: 66px;
}

.refresh {
    margin-bottom: 10px;
}

.el-row .el-input {
    width: 150px;
}

.name {
    width: 10%;
    padding-right: 0;
}

.mt {
    margin-top: 5px;
}

.last {
    padding-right: 0;
    text-align: center;
}

.el-select {
    width: 150px;
}

.saveData {
    margin-left: 600px;
    margin-bottom: 20px;
}

.mb10 {
    margin-bottom: 10px;
}

.w100 {
    width: 50px;
    height: 50px;
}

.wh100 {
    width: 100px;
    height: 100px;
    vertical-align: center;
}

.mt20 {
    margin-bottom: 30px;
}
.w32 {
    width: 32%;
    padding-right: 0;
}
</style>
